import { useState } from 'react';
import { Input } from 'antd';
import type { GetProps } from 'antd';
import Navigation from '../../components/Navigation/index.tsx';
import ColorSelector from '../../components/ColorSelector/ColorSelector.tsx';
import PaginationComponent from '../../components/Pagination.tsx';
import Rightnav from '../../components/rightnav/rightnav.tsx';
import { adscenedata, adplatetypedata, adsortdata, initialOptions, alladData } from './advertisementData.ts';
import './advertisement.css';

type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const Advertisement = () => {
  const [highlightedIndex, setHighlightedIndex] = useState(0);
  const [highlightedIndex2, setHighlightedIndex2] = useState(0);
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  const [selectedScene, setSelectedScene] = useState<string | null>(null);
  const [selectedPlateType, setSelectedPlateType] = useState<string | null>(null);
  const [options, setOptions] = useState(initialOptions);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 20;

  const handleClick3 = (index: number) => {
    setSelectedIndex(index);
  };

  const handleMouseEnter = (index: any) => {
    if (highlightedIndex === null) {
      setHighlightedIndex(index);
    }
  };

  const handleClick = (index: any, value: any) => {
    console.log(value);
    setHighlightedIndex(index);
    setSelectedScene(value === '全部' ? null : value);
  };

  const handleMouseEnter2 = (index: any) => {
    if (highlightedIndex2 === null) {
      setHighlightedIndex2(index);
    }
  };

  const handleClick2 = (index: any, value: any) => {
    console.log(value);
    setHighlightedIndex2(index);
    setSelectedPlateType(value === '全部' ? null : value);
  };

  // 更新选项选中状态的函数
  const toggleOption = (id: string) => {
    const newOptions = options.map((option: any) =>
      option.id === id ? { ...option, isSelected: !option.isSelected } : option
    );
    setOptions(newOptions);
  };

  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };

  // 筛选数据
  const filteredData = alladData.filter(item => {
    const matchesScene = selectedScene ? item.scene === selectedScene : true;
    const matchesPlateType = selectedPlateType ? item.platetype === selectedPlateType : true;
    return matchesScene && matchesPlateType;
  });

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const paginatedData = filteredData.slice(startIndex, endIndex);

  return (
    <div className='advertisement_box'>
      <div className='Navigation'>
        <Navigation />
      </div>
      <Rightnav />
      <div className="advertisement_box_nei">
        {/* 上部分 */}
        <div className='advertisement_top'>
          <div className='advertisement_top_nei'>
            {/* 上部分标题 */}
            <div className='advertisement_top_title'>广告设计</div>
            {/* 上部分 搜索框等 */}
            <div className='advertisement_top_position'>
              <div>当前位置</div>
              <div>广告设计</div>
              <div>共<span className='orange'>{filteredData.length}</span>个结果</div>
              <div>
                <Search
                  placeholder="请输入关键词"
                  allowClear
                  enterButton="搜索"
                  size="large"
                  onSearch={onSearch}
                />
              </div>
            </div>
            {/* 上部分筛选 */}
            <div className='advertisement_top_screen'>
              <div className='advertisement_top_screen1'>
                <div className='advertisement_top_screen1_left orange'>场景:</div>
                <div className='advertisement_top_screen1_right'>
                  {adscenedata.map((item, index) => (
                    <div
                      key={index}
                      onMouseEnter={() => handleMouseEnter(index)}
                      onClick={() => handleClick(index, item)}
                      style={{
                        backgroundColor: highlightedIndex === index ? 'orange' : 'transparent',
                        color: highlightedIndex === index ? 'white' : 'black',
                        borderRadius: '10px',
                        transition: 'background-color 0.3s, color 0.3s',
                        cursor: 'pointer'
                      }}
                    >
                      <a>{item}</a>
                    </div>
                  ))}
                </div>
              </div>
              <div className='advertisement_top_screen2'>
                <div className='advertisement_top_screen2_left orange'>板式:</div>
                <div className='advertisement_top_screen2_right'>
                  {adplatetypedata.map((item, index) => (
                    <div
                      key={index}
                      onMouseEnter={() => handleMouseEnter2(index)}
                      onClick={() => handleClick2(index, item)}
                      style={{
                        backgroundColor: highlightedIndex2 === index ? 'orange' : 'transparent',
                        color: highlightedIndex2 === index ? 'white' : 'black',
                        borderRadius: '10px',
                        transition: 'background-color 0.3s, color 0.3s',
                        cursor: 'pointer'
                      }}
                    >
                      <a>{item}</a>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className='ColorSelector'>
          <div className='ColorSelector_text'>颜色搜索</div>
          <ColorSelector />
        </div>
        <div className='advertisement_main'>
          <div className='advertisement_main_top'>
            <div className='advertisement_main_top_left'>
              排序方式:
              {
                adsortdata.map((item, index) => (
                  <div
                    key={index}
                    onClick={() => handleClick3(index)}
                    style={{
                      color: index === selectedIndex ? 'orange' : 'black',
                      cursor: 'pointer'
                    }}
                  >
                    {item}
                  </div>
                ))
              }
              <div style={{ color: "#ccc" }}>|</div>
            </div>
            <div className='advertisement_main_top_right'>
              <div>素材类型:</div>
              {options.map((option: any) => (
                <div key={option.id} style={{ marginBottom: '10px' }}>
                  <input
                    type="checkbox"
                    id={`checkbox-${option.id}`}
                    checked={option.isSelected}
                    onChange={() => toggleOption(option.id)}
                  />
                  <label htmlFor={`checkbox-${option.id}`}>{option.label}</label>
                </div>
              ))}
            </div>
          </div>
          <div className='advertisement_main_center'>
            {
              paginatedData.map((item: any, index: number) => (
                <div className='PosterBody_list_item' key={index} style={{ position: 'relative' }}>
                  <div className='PosterBody_list_item_xaun'>正版</div>
                  <img src={item.image} alt="" className='PosterBody_list_item_img' />
                  <div style={{ display: "none" }}>{item.scene}</div>
                  <div style={{ display: "none" }}>{item.platetype}</div>
                  <div className="p_overlay">
                    <div className="p_overlay_title">
                      {item.name}<span>☆</span><button>版权授权</button>
                    </div>
                    <div className="p_overlay_button">
                      <button className='p_overlay_button_edit'>在线编辑</button>
                      <br />
                      <br />
                      <button className='p_overlay_button_download'>点击下载</button>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
        <div className='adpage'>
          <PaginationComponent
            currentPage={currentPage}
            total={filteredData.length}
            pageSize={pageSize}
            onPageChange={handlePageChange}
            showSizeChanger={false}
          />
        </div>
      </div>
    </div>
  );
};

export default Advertisement;